<template>
  <div class="content">
    <el-dialog title="任课管理" :visible.sync="dialogVisible" width="450px" @close="closeDialog">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" style="width: 100%">
        <el-form-item label="课程名" prop="subjectName">
          <el-select v-model="form.subjectName" filterable placeholder="请选择科目名称">
            <el-option
              v-for="item in option1"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classId">
          <el-select v-model="form.classId" filterable placeholder="请选择班级">
            <template v-for="item in classList">
              <el-option :label="item.grade.year+item.grade.name+item.name" :value="item.id"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="任课老师" prop="teacherId">
          <el-select v-model="form.teacherId" filterable placeholder="请选择老师">
            <template v-for="item in option2">
              <el-option :label="item.schoolno+'---'+item.name" :value="item.id"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdate(form)" v-if="this.form.id">更新</el-button>
          <el-button type="primary" @click="handleSave(form)" v-else>添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item>
       <el-select v-model="search.name" filterable placeholder="请选择科目名称" clearable>
         <el-option
           v-for="item in option1"
           :key="item.id"
           :label="item.name"
           :value="item.name"
           ></el-option>
       </el-select>
      </el-form-item>
      <el-form-item>
                <el-select v-model="search.classId" filterable placeholder="请选择班级" clearable>
                  <template v-for="item in classList">
                    <el-option :label="item.grade.year+item.grade.name+item.name" :value="item.id"></el-option>
                  </template>
                </el-select>
       </el-form-item>
      <el-form-item>
        <el-select v-model="search.schoolno" filterable placeholder="请选择老师" clearable>
          <el-option
            v-for="item in option2"
            :key="item.id"
            :label="item.schoolno+'---'+item.name"
            :value="item.schoolno"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  @click="getList(search.name,search.classId,search.schoolno)">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">新添班级任教信息</el-button>
      </el-form-item>
      <el-form-item>
        <el-form-item>
          <el-popconfirm title="这是确定批量删除吗？" @onConfirm="handleDel(null)">
            <template #reference>
              <el-button type="danger" slot="reference" :disabled="delBtlStatu">批量删除</el-button>
            </template>
          </el-popconfirm>
        </el-form-item>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-upload-->
<!--          ref="upload2"-->
<!--          class="upload-demo"-->
<!--          accept=".xlsx,.xls"-->
<!--          :auto-upload="false"-->
<!--          action=""-->
<!--          :limit="1"-->
<!--          :on-exceed="handleExceed"-->
<!--          :http-request="httpRequest"-->
<!--        >-->
<!--          <template #trigger>-->
<!--            <el-tooltip content="仅限文件格式为.xls,.xlsx" placement="top" effect="light">-->
<!--              <el-button type="primary">选择文件</el-button>-->
<!--            </el-tooltip>-->
<!--          </template>-->
<!--          <el-button style="margin-left: 10px"-->
<!--                     type="success"-->
<!--                     @click="submitUpload"-->
<!--          >立即导入<i class="el-icon-upload el-icon-right"></i>-->
<!--          </el-button>-->
<!--        </el-upload>-->
<!--      </el-form-item>-->
    </el-form>
    <el-table
      ref="multipleTable"
      :data="table"
      border
      stripe
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(255, 255, 255, 0.7)"
      style="width: 100%"
      @row-click="toggleSelection"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="subjectName"
        label="课程名称"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="classId"
        label="班级"
        sortable
      >
        <template slot-scope="scope">
          {{scope.row.className}}
        </template>
      </el-table-column>
      <el-table-column
        prop="schoolno"
        label="任课老师"
        sortable
      >
        <template slot-scope="scope">
          {{scope.row.teacherName}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button  type="text" size="small" @click="handelEdit(scope.row)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="这是确定删除吗？" @onConfirm="handleDel(scope.row.id)">
            <el-button  type="text" slot="reference" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {getSubjectClass,del,update,save,upload,listSubjectName,getClassList,listTeacher} from '@/api/sysEdu/subjectClass'

  export default {
    name: 'ClassSubject',
    data() {
      return {
        loading: true,
        delBtlStatu: true,
        classList:[],
        option1:[],//存放科目下拉的列表
        option2:[],//存放任课老师列表
        // 分页用到的属性
        total: 0,
        current: 1,
        size: 5,
        //搜索
        search:{
          name:"",
          classId:"",//根据选择的学年年级班级返回的id
          teacherId:""//根据选择的老师--工号返回的id
        },
        //表格
        table:[],
        //对话框
        dialogVisible: false,
        //表单
        form:{
          subjectName:'',
          classId: '',
          teacherId:'',
          // teacherName:''//回显老师姓名,因为只回显老师姓名可能出现同名,加上工号形成唯一辨识
        },
        //校验
        rules: {
          subjectName: [
            {required: true, message: '请输入用户姓名', trigger: 'select'}
          ],
          classId: [
            {required: true, message: '请选择班级', trigger: 'blur'}
            ],
          teacherId:[{
            required: true, message: '请选择任课老师', trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getList()
      this.listSubjectName()
      this.listTeacher()
      this.getClassList()
    },
    methods: {
      toggleSelection(row) {
        this.$refs.multipleTable.toggleRowSelection(row);
      },
      // 触发事件为有复选框发生变化，会传递所有勾选的行数据对象数组
      handleSelectionChange(val) {
        this.multipleSelection = val;
        //设置批量删除的按钮的可用/不可用
        this.delBtlStatu = val.length == 0
      },
      //这里是分页
      handleSizeChange(val) {
        this.size = val
        this.getList()
        this.getClassList()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getList()
        this.getClassList()
      },
      getList(){
        getSubjectClass(this.search.name,this.search.classId,this.search.schoolno,this.current,this.size).then(res => {
          this.table = res.data.data.records
          this.size = res.data.data.size
          this.total = res.data.data.total
          this.current = res.data.data.current
          this.loading=false
        })
      },
      listSubjectName(){
        listSubjectName().then(res=>{
          this.option1=res.data.data
        })
      },
      listTeacher(){
        listTeacher().then(res=>{
          this.option2=res.data.data;
        })
      },
      getClassList(){
        getClassList().then(res=>{
          this.classList=res.data.data;
        })
      },
      closeDialog(){
        this.form= { subjectName:'',classNo:'',teacherId:'',teachers:'',teacherName:''}
        this.$refs.form.resetFields();
        this.dialogVisible = false
      },
      handleSave(){
        this.$refs.form.validate(valid => {
          if (valid) {
            save(this.form).then(res=>{
              this.dialogVisible = false
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
              this.getList()
              this.getClassList()
            })
          } else {
            return false;
          }
        });
      },
      handleUpdate(){
        this.$refs.form.validate((valid) =>{
          if (valid) {
            update(this.form).then(res=>{
              this.dialogVisible = false
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              this.getList()
              this.getClassList()
            })
          } else {
            return false;
          }
        });
      },
      handelEdit(row){
        this.dialogVisible = true
        this.$nextTick(() => {
          this.form = JSON.parse(JSON.stringify(row))
        })
      },
      handleDel(id){
        var ids = []
        if (id) {
          ids.push(id)
        } else {
          this.multipleSelection.forEach(row => {
            ids.push(row.id)
          })
        }
        del(ids).then(res=>{
          this.$message({
            message:res.data.msg,
            type:'success'
          });
          this.getList();
        })
      },
      // 批量导入老师
      // handleExceed(file,fileList){
      //   this.$message.warning('每次只能选择一个文件');
      // },
      // httpRequest(param){
      //   let excelFileObj=param.file
      //   let form=new FormData()
      //   form.set('excel',excelFileObj)
      //   upload(form).then(res=>{
      //     this.$message({
      //       showClose:true,
      //       message:'恭喜你，操作成功',
      //       type:'success',
      //     });
      //     this.getList()
      //     // this.$refs.upload2.clearFiles()
      //   })
      // },
      // submitUpload(){
      //   this.$refs.upload2.submit()
      // },
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon{
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar{
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
